import './WijmoA02.scss'
import { useMount } from "ahooks";
import { useState } from "react";
import { FlexGrid } from '@grapecity/wijmo.react.grid';
import { Radio } from "antd";
const WijmoB04 = () => {

    const [Data, setData] = useState()
    const [allowSorting, setAllowSorting] = useState('None')


    const onChange = (e) => {
        setAllowSorting(e.target.value)
    }



    useMount(() => {
        const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',')
        const data = [...Array(100)].map((_, i) => ({
            id: i + 1,
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            num1: Math.random() * 5000,
            num2: Math.random() * 5000,
            num3: Math.random() * 5000,
            num4: Math.random() * 5000,
            num5: Math.random() * 5000,
        }))
        setData(data)
    })

    if (Data) {
        return (
            <div className='Page WijmoA02'>
                <FlexGrid itemsSource={Data} allowSorting={allowSorting} />
                <Radio.Group onChange={onChange} defaultValue={allowSorting}>
                    <Radio.Button value="None">禁用</Radio.Button>
                    <Radio.Button value="SingleColumn">单排</Radio.Button>
                    <Radio.Button value="MultiColumn">多排</Radio.Button>
                </Radio.Group>
                <div> Ctrl+Click 删除排序 </div>
                <div> Ctrl+Shift+Click 可删除所有排序 </div>
            </div>
        )
    }
};

export default WijmoB04;